<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="oapi.dingtalk.com">
    <title>钉钉机器人控制器</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        #app {
            width: 500px;
            height: 600px;
            text-align: center;
            margin: 0 auto;
        }
        
        body {
            text-align: center;
        }
        
        #who {
            width: 400px;
            height: 30px;
        }
        
        #token {
            width: 400px;
            height: 30px;
        }
        
        #markdown {
            width: 500px;
            height: 250px;
            display: none;
            background-color: blanchedalmond;
        }
        
        #link {
            width: 500px;
            height: 250px;
            display: none;
            background-color: blanchedalmond;
        }
        
        #text {
            width: 500px;
            height: 250px;
            display: block;
            background-color: blanchedalmond;
        }
    </style>
</head>

<body>
    <a href="https://developers.dingtalk.com/document/robots/custom-robot-access">
        <h1>钉钉机器人操作器</h1>
    </a>

    <div id="app">
        <h3>token</h3>
        <input v-model="token" id="token">
        <h3>这个人叫什么</h3>
        <input v-model="whois" id="who" />
        <div id="xuan">
            <input id="type" name="type" type="radio" value="0" onclick="change()" />link类型类型
            <input id="type" name="type" type="radio" value="1" onclick="change()" />markdown类型
            <input id="type" name="type" type="radio" value="2" onclick="change()" checked="true" />text类型
        </div>
        <div id="text">
            手机号:<input type="text" id="phone"> 是否群发: 是
            <input type="radio" id="qun" value="0" name="qun" onclick="isqun()"> 否
            <input type="radio" id="qun" checked="true" value="1" name="qun" onclick="isqun()">
            <textarea name="text11" id="textarea" cols="30" rows="10" v-model='intext'></textarea>
        </div>

        <div id="markdown">
            手机号:<input type="text" id="phone" v-model="markdown.phone"> 是否群发: 是
            <input type="radio" id="qun" value="0" name="qunm" onclick="isqun()" checked="true"> 否
            <input type="radio" id="qun" value="1" name="qunm" onclick="isqun()">
            <textarea name="text11" id="textarea" cols="30" rows="10" v-model='intext'></textarea>
        </div>
        <div id="link">
            url:<input type="text" id="url"> picurl:
            <input type="text" id="picurl"><br> tiltle:
            <input type="text" id="title"> text:
            <br>
            <textarea name="text11" id="textarea" cols="30" rows="10" v-model='intext'></textarea>
        </div>
        <br>
        <button v-on:click='go'>发送</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                markdown: {
                    phone: ""
                },
                intext: "",
                token: "",
                whois: ""
            },
            methods: {
                go: function() {
                    var radio = document.getElementsByName("type");
                    if (radio[0].checked) {

                    } else if (radio[1].checked) {
                        $.ajax({
                            type: 'GET',
                            url: "/travel/makerdown?message=" + this.intext + "&token=" + this.token + "&whois=" + this.whois + "&qun=" + qqq + "&phone" + this.markdown.phone,
                            success: function(data) {
                                alert("发送成功");
                            },
                            error: function(d, msg) {
                                alert("error");
                            }
                        })
                    } else {

                    }

                }
            }
        })
    </script>
    <script>
        var qqq = true;

        function change() {
            var radio = document.getElementsByName("type");
            if (radio[0].checked) {
                $("#text").css("display", "none");
                $("#markdown").css("display", "none");
                $("#link").css("display", "block");
            } else if (radio[1].checked) {
                $("#text").css("display", "none");
                $("#link").css("display", "none");
                $("#markdown").css("display", "block");
            } else {
                $("#text").css("display", "block");
                $("#link").css("display", "none");
                $("#markdown").css("display", "none");
            }
        }

        function isqun() {
            var qunms = document.getElementsByName("qunm");
            if (qunms[0].checked) {
                qqq = true;
            } else {
                qqq = false;
            }

        }
    </script>
</body>

</html>